<template>
  <div class="header">
    <!-- 折叠按钮 -->
    <div class="collapse-btn" @click="collapseChage">
      <base-icon base-icon="icon-shezhi" />
    </div>
    <div class="header-bread">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{ currentRoute }}</el-breadcrumb-item>
        <!-- <el-breadcrumb-item>promotion list</el-breadcrumb-item> -->
      </el-breadcrumb>
    </div>
    <div class="header-right">
      <div class="header-user-con">
        <!-- 消息中心 -->
        <!-- <div class="btn-bell" @click="router.push('/home/tabs')">
          <el-tooltip effect="dark" :content="message ? `有${message}条未读消息` : `消息中心`" placement="bottom">
            <i class="el-icon-lx-notice"></i>
          </el-tooltip>
          <span class="btn-bell-badge" v-if="message"></span>
        </div> -->

        <!-- 用户名下拉菜单 -->
        <el-dropdown class="user-name" trigger="hover" @command="handleCommand">
          <!-- 用户头像 -->
          <el-avatar class="user-avator" :size="30" :src="userStore.avatarUrl" />
          <template #dropdown>
            <el-dropdown-menu>
              <a href="https://gitee.com/wangzekkkk" target="_blank">
                <el-dropdown-item>Gitee</el-dropdown-item>
              </a>
              <el-dropdown-item command="user">个人中心</el-dropdown-item>
              <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { onMounted, computed } from 'vue'
  import useSidebarStore from '@/store/sidebar'
  import { useRouter } from 'vue-router'
  import { sessionCache } from '@/utils/cache'
  import useUserStore from '@/store/user'
  const userStore = useUserStore()
  const message: number = 2

  const sidebarStore = useSidebarStore()
  // 侧边栏折叠
  const collapseChage = () => {
    sidebarStore.handleCollapse()
  }

  onMounted(() => {
    if (document.body.clientWidth < 1000) {
      collapseChage()
    }
  })

  // 用户名下拉菜单选择事件
  const router = useRouter()
  const handleCommand = (command: string) => {
    if (command == 'loginout') {
      sessionCache.deleteCache('userInfo')
      router.push('/login')
    } else if (command == 'user') {
      router.push('/home/profile')
    }
  }

  const currentRoute = computed(() => {
    const current = router.currentRoute.value.meta.title
    return current === '系统首页' ? '' : current
  })
</script>
<style scoped>
  .header {
    position: relative;
    width: 100%;
    height: 50px;
    margin: 0;
    font-size: 22px;
    color: #000;
    box-sizing: border-box;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
  }

  .collapse-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    float: left;
    padding: 0 30px;
    cursor: pointer;
  }

  .header-bread {
    float: left;
    display: flex;
    align-items: center;
    height: 100%;
  }

  .header-right {
    float: right;
    padding-right: 50px;
  }

  .header-user-con {
    display: flex;
    height: 50px;
    align-items: center;
  }

  .btn-fullscreen {
    transform: rotate(45deg);
    margin-right: 5px;
    font-size: 24px;
  }

  .btn-bell,
  .btn-fullscreen {
    position: relative;
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
  }

  .btn-bell-badge {
    position: absolute;
    right: 4px;
    top: 0px;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: #f56c6c;
    color: #000;
  }

  .btn-bell .el-icon-lx-notice {
    color: #000;
  }

  .user-name {
    margin-left: 10px;
  }

  .user-avator {
    margin-left: 20px;
  }

  .el-dropdown-link {
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
  }

  .el-dropdown-menu__item {
    text-align: center;
  }
</style>
